<div class="index-wrapper">
  <main class="homepage container">
    <input 
      type="text" 
      class="search" 
      placeholder="聚焦搜索" 
      maxlength="50"
      (input)="searchLoading = true; handleSearch()"
      [(ngModel)]="searchKeyword"
      *ngIf="showInput"
      (blur)="showInput = false"
    />

    <div
      class="fixed-collapse"
      (click)="onCollapseAll()"
      [class.active]="websiteList[page].nav[id].collapsed"
    >
      <img
        src="assets/img/collapse.svg"
        alt=""
      >
    </div>

    <nav class="top-nav user-select-none">
      <a 
        *ngFor="let item of websiteList; let i = index;" 
        (click)="handleCilckTopNav(i)" 
        [class.active]="page === i" 
        class="ripple-btn">
        {{ item.title }}
      </a>
    </nav>

    <section class="index-section user-select-none">
      <aside class="sidebar" id="sidebar">
        <ul>
          <li 
            class="tag" 
            *ngFor="let item of websiteList[page].nav; let i = index" 
            [class.active]="id === i" 
            (click)="handleSidebarNav(i)">
            <a class="ripple-btn" *ngIf="item.title">{{ item.title }}</a>
          </li>
        </ul>
        <div class="icon-box">
          <a href="javascript:;" (click)="handleOnClickSearch()">
            <img src="assets/img/search.svg" alt="" class="icon" draggable="false">
          </a>
        </div>
      </aside>

      <div class="main">
        <app-loading *ngIf="searchLoading"></app-loading>

        <app-search-engine></app-search-engine>
 
        <ul *ngIf="currentList.length && currentList[0].nav">
          <li *ngFor="let item of currentList; let i=index">
            <div class="title-wrapper" *ngIf="item.title || item.subtitle">
              <h2 class="block-title">
                <span
                  (click)="onCollapse(item, i)"
                  class="cursor-pointer"
                >
                  {{ item.title || item.subtitle }} x {{ item.nav.length }}
                </span>

                <img
                  src="assets/img/down-arrow.svg"
                  class="down-arrow"
                  [class.active]="item.collapsed" 
                  draggable="false"
                  alt=""
                  (click)="onCollapse(item, i)"
                />

                <a
                  *ngIf="GIT_REPO_URL"
                  [href]="GIT_REPO_URL + '/tree/master/data'"
                  class="edit"
                  target="_blank"
                  rel="noopener noreferer"
                  title="编辑"
                >
                </a>
              </h2>

              <img
                *ngIf="item.icon && item.showSideIcon !== false"
                [src]="item.icon"
                class="side-logo"
                (error)="onSideLogoError($event)"
                alt="" 
              />
            </div>

            <div class="row" *ngIf="!item.collapsed">
              <div class="click-btn" *ngFor="let el of item.nav">
                <a [href]="el.url" target="_blank" rel="noopener noreferer">
                  <div class="top">
                    <img
                      *ngIf="el.icon || item.icon || websiteList[page].nav[id].icon; else icon"
                      [src]="el.icon || item.icon || websiteList[page].nav[id].icon"
                      alt=""
                      class="icon"
                      (error)="onImgError($event)"
                    >
                    <ng-template #icon>
                      <span class="icon"></span>
                    </ng-template>
                    <em class="name" [innerHtml]="el.name"></em>
                  </div>
                  <div class="desc" [innerHtml]="el.desc"></div>
                </a>

                <div class="mark" *ngIf="el.language && el.language.length > 0">
                  <div class="button-box">
                    <a 
                      [href]="el.language[0]" 
                      class="zh" 
                      target="_blank" 
                      *ngIf="el.language[0]" 
                      rel="noopener noreferer"
                    >
                      {{ language[0] }}
                    </a>
                    <a 
                      [href]="el.language[1]" 
                      class="zh" 
                      target="_blank" 
                      *ngIf="el.language[1]" 
                      rel="noopener noreferer"
                    >
                      {{ language[1] }}
                    </a>
                    <a 
                      [href]="el.language[2]" 
                      class="zh" 
                      target="_blank" 
                      *ngIf="el.language[2]" 
                      rel="noopener noreferer"
                    >
                      {{ language[2] }}
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
  
        <app-no-data
          *ngIf="currentList.length && currentList[0].nav && !currentList[0].nav.length"
        >
        </app-no-data>
      </div>
    </section>
  </main>

  <app-footer></app-footer>
</div>
